<template>
	<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
		<template v-for="item in swiperData">
			<swiper-item class="banner_item" v-if="item.show == 1" :key="item._id">
				<image :src="item.image_src"></image>
			</swiper-item>
		</template>
	</swiper>
</template>

<script>
	export default {
		name: "banner",
		data() {
			return {
				swiperData: [],
			};
		},
		methods: {
			async getSwiperData() {
				const data = await this.$api.home.getSwiperData();
				if (data.meta.status == 200) {
					this.swiperData = data.message;
				}
			}
		},
		created() {
			this.getSwiperData();
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		width: 686rpx;
		margin: 64rpx 32rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.banner_item {
			width: 100%;

			>image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
